<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>Bienvenido al Gimnasio Inteligente</title>
        <link rel="stylesheet" href="resources/css/style.css" />
        <style type="text/css">
            html{
                height: 100%;
            }
            body{
                height: 80%;
            }
            .ui-layout-north {
                z-index:20 !important;
                overflow:visible !important;;
            }
            .ui-layout-north .ui-layout-unit-content {
                overflow:visible !important;
            }   
            .ui-layout-unit-content{
                overflow:visible !important;
            }
            .ui-autocomplete input { /*Amplia tamaño de campo de Texto Autocompletar*/
                width:300px;
            }
            .ui-calendar input{
                width:250px;
            }
            #individual{
                height: 450px;
                width:  800px;
                margin-top: 10px;
                background-color: #e2e2e2;
            }
            #general{
                height: 450px;
                width:  650px;
                margin-left: 820px;
                margin-top: -450px;
                background-color: aliceblue;
            }
        </style>
    </h:head>
    <h:body>
        <p:layout fullPage="true" >  

            <p:layoutUnit position="north" size="100" 
                          resizable="false" closable="false" collapsible="false" header="CONSULTA DE PAGO DE DEPORTISTAS">  
                <!--Encabezado o Menu Bar que es de Layout -->
                <h:form id="frmMenu">
                    <p:menubar>   
                        <p:menuitem value="Inicio" url="inicio.xhtml" icon="inicio" />  
                        <p:submenu  label="Administracion de Deportistas" icon="administracion" >  
                            <p:menuitem value="Crear" url="crearDeportistas.xhtml" icon="usuario"/>  
                            <p:menuitem value="Asociar Rutinas" url="administrarPerfiles.xhtml" icon="permisos"/>
                            <p:menuitem value="Ajustar -re plan" url="administrarAreas.xhtml" icon="areas"/>
                        </p:submenu>  

                        <p:submenu label="Charlas - Foros - Eventos" icon="baseConocimiento" >  
                            <p:menuitem value="Crear nuevo Evento" url="creacionEventos.xhtml" icon ="categorias"/>   
                            <p:menuitem value="Programación Eventos" url="programacionEventos.xhtml" icon ="solucion"/>   
                        </p:submenu>  

                        <p:submenu label="Reportes" icon="incidencia">
                            <p:menuitem value="Historial de Usuariio" url="IncidenciasxResolver.xhtml" icon="mio"/> 
                            <p:menuitem value="Perfiles Similares" url="perfilesSimilares.xhtml" icon="problema" />
                            <p:menuitem value="Bajos Desempeños" url="administrarAsignaciones.xhtml" icon="solucion"/> 
                            <p:menuitem value="Pagos realizados" url="informePagos.xhtml" icon="asociar"/> 
                        </p:submenu> 
                        <p:submenu label="Máquinas de Ejercicios"  icon="candado" >  
                            <p:menuitem value="Asoc Máquina-Usuario" url="asociarMaquinaUsuario.xhtml" icon="mio"/> 
                        </p:submenu> 
                    </p:menubar>
                </h:form> 
            </p:layoutUnit> 
            <!--*************************************************************************** -->           
            <!-- Panel central o Contenedor  -->

            <p:layoutUnit position="center" size="900" 
                          style="border-bottom: transparent; 
                          border-top: transparent; 
                          border-left: transparent; 
                          border-right: transparent"> 
                <h:form id="frmInformePagos">
                    <p:panelGrid columns="6">
                        <p:panelGrid columns="2">
                            <p:outputLabel value="Fecha: " style="font-weight: bold"/>
                            <p:outputLabel value="#{informePagosBean.fecha}" />
                            <p:outputLabel value="Valor Mensualidad: " style="font-weight: bold"/>
                            <p:outputLabel value="$ #{informePagosBean.valorMensualidad}" />
                        </p:panelGrid>
                        <p:outputLabel value="Ver Reporte por :"/>
                        <p:selectOneMenu value="#{informePagosBean.tipoReporte}">
                            <f:selectItem itemLabel="Individual" itemValue="A" />
                            <f:selectItem itemLabel="General Deportistas" itemValue="B"/>
                        </p:selectOneMenu>
                        <p:selectOneMenu value="#{informePagosBean.deportistaSeleccionado}" required="true">
                            <f:selectItems value="#{informePagosBean.usuariosSelectItem}">
                            </f:selectItems>
                        </p:selectOneMenu>
                        <p:commandButton value="Generar Reporte" action="#{informePagosBean.generarReporte()}" />
                        <img src="resources/img/pagos.jpg" width="100px;"/>
                    </p:panelGrid>
                    <div id="individual">
                        <img src="resources/img/usuario3.jpg" width="200px;"></img>
                        <p:dataTable value="#{informePagosBean.pagosIndividualesList}" 
                                     var="x" emptyMessage="Sin registros"
                                      widgetVar="informeIndividual" >
                            <p:column headerText="Fecha de Pago">
                                <h:outputText value="#{x.fecha}"></h:outputText>
                            </p:column>
                            <p:column headerText="Valor">
                                <h:outputText value="#{x.valor}"></h:outputText>
                            </p:column>
                        </p:dataTable>
                    </div>
                    <div id="general">                    
                        <p:dataTable value="#{informePagosBean.pagosGeneralList}" 
                                     var="x" emptyMessage="Sin registros"
                                      widgetVar="informeGeneral" >
                            <p:column headerText="Usuario">
                                <h:outputText value="#{x.valor}"></h:outputText>
                            </p:column>
                            <p:column headerText="Fecha de Pago">
                                <h:outputText value="#{x.fecha}"></h:outputText>
                            </p:column>
                            <p:column headerText="Valor">
                                <h:outputText value="#{x.valor}"></h:outputText>
                            </p:column>
                        </p:dataTable>
                    </div>
                </h:form>
            </p:layoutUnit>


            <p:layoutUnit position="south" size="50" header="" resizable="false" closable="false" collapsible="false" 
                          style="text-align:center; font-size: 12px;" >  
                <h:outputText value="Gimnasio Inteligentes / " /> 
                <h:outputText value="Corporaci&oacute;n universitaria Minuto de Dios / " />  
                <h:outputText value="Desarrollado por: Yinna Martinez y Diego Babativa" /><br />
            </p:layoutUnit> 
        </p:layout>
    </h:body>
</html>
